<template>
  <view>
    <!-- 轮播图 -->
    <swiper
      :autoplay="true"
      :interval="3000"
      :duration="500"
      @change="onSwiperChange"
      :current="currentIndex"
      class="swiper"
    >
      <!-- 第一个项是视频 -->
      <swiper-item>
        <view class="swiper-item">
          <video
            :src="videoUrl"
            :poster="videoPoster"
            :autoplay="currentIndex === 0"
            controls
            :id="'video0'"
            class="video"
          ></video>
        </view>
      </swiper-item>

      <!-- 其他项是图片 -->
      <swiper-item v-for="(item, index) in imageList" :key="index">
        <view class="swiper-item">
          <image :src="item" mode="aspectFill" class="image"></image>
        </view>
      </swiper-item>
    </swiper>
	<!-- 覆盖内容 -->
	    <cover-view class="custom-overlay">覆盖内容</cover-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'https://www.tradesaudi.com/public/upload/goods/2025/01-16/a23520276ea9ab4fb3c6b830d86facb5.mp4', // 视频地址
      videoPoster: 'https://www.tradesaudi.com/public/upload/goods/2024/12-30/347718dcd3daac58afae58b86cb317c5.jpg', // 视频封面
      imageList: [
        'https://www.tradesaudi.com/public/upload/goods/2024/12-30/347718dcd3daac58afae58b86cb317c5.jpg', // 图片地址
        'https://www.tradesaudi.com/public/upload/goods/2024/12-30/347718dcd3daac58afae58b86cb317c5.jpg' // 图片地址
      ],
      currentIndex: 0 // 当前轮播图索引
    };
  },
  methods: {
    // 监听轮播图切换事件
    onSwiperChange(event) {
      const index = event.detail.current; // 获取当前轮播项索引
      this.currentIndex = index;

      // 如果切换到第一个项（视频），播放视频
      if (index === 0) {
        const video = uni.createVideoContext('video0');
        video.play();
      } else {
        // 如果切换到其他项，暂停视频
        const video = uni.createVideoContext('video0');
        video.pause();
      }
    }
  }
};
</script>

<style>
	
	.custom-overlay {
	  position: absolute;
	  top: 10px;
	  left: 10px;
	  color: #fff;
	  font-size: 16px;
	}
.swiper {
  width: 100%;
  height: 300px; /* 根据需求调整高度 */
}

.swiper-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video,
.image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保视频填充容器 */
    display: block;
}
</style>